﻿@{
    Layout = "_ConfigurePlugin";
}
@using System.Text.Encodings.Web
@model Widgets.GoogleAnalytics.Models.ConfigurationModel

@await Component.InvokeAsync("StoreScope")
@{
    //default values
    var googleAnalytics_trackingScript = Html.Raw(JavaScriptEncoder.Default.Encode(@"<!-- Google tag (gtag.js) -->
                    <script async src='https://www.googletagmanager.com/gtag/js?id={GOOGLEID}'></script>
                    <script>
                        window.dataLayer = window.dataLayer || [];
                        function gtag(){dataLayer.push(arguments);}
                        gtag('js', new Date());
                        gtag('config', '{GOOGLEID}');
                        {ECOMMERCE}
                    </script>
                "));
    var googleAnalytics_EcommerceScript = Html.Raw(JavaScriptEncoder.Default.Encode("gtag('event', 'purchase', {transaction_id: '{ORDERID}', value: {TOTAL}, tax: {TAX}, shipping: {SHIP}, currency: '{CURRENCY}', city: '{CITY}', state: '{STATEPROVINCE}', country: '{COUNTRY}', items: [{DETAILS}]});"));
    var googleAnalytics_EcommerceDetailScript = Html.Raw(JavaScriptEncoder.Default.Encode("{ item_id: '{PRODUCTID}', item_name: '{PRODUCTNAME}', item_category: '{CATEGORYNAME}', price: {UNITPRICE}, quantity: {QUANTITY} }, "));
}
<script>
    $(document).ready(function () {
        $("#pre-configure-google-analytics").click(preConfigureGoogleAnalytic);        
    });

    function preConfigureGoogleAnalytic() {
        $('#@Html.IdFor(model => model.TrackingScript)').val('@googleAnalytics_trackingScript');
        $('#@Html.IdFor(model => model.EcommerceScript)').val('@googleAnalytics_EcommerceScript');
        $('#@Html.IdFor(model => model.EcommerceDetailScript)').val('@googleAnalytics_EcommerceDetailScript');
    }

</script>
<form asp-controller="WidgetsGoogleAnalytics" asp-action="Configure" method="post">

    <div class="form-horizonal">
        <div class="form-body">
            <div class="form-group">
                <div class="note note-info">
                    <p>
                        Google Analytics is a free website stats tool from Google. It keeps track of statistics
                        about the visitors and ecommerce conversion on your website.
                    </p>
                    <p>
                        Follow the next steps to enable Google Analytics integration:
                    </p>
                    <ul>
                        <li>
                            <a href="http://www.google.com/analytics/" target="_blank">
                                Create a Google Analytics
                                account
                            </a> and follow the wizard to add your website
                        </li>
                        <li>Copy the Tracking ID into the 'ID' box below</li>
                        <li>Click the 'Save' button below and Google Analytics will be integrated into your store</li>
                    </ul>
                    <input type="button" id="pre-configure-google-analytics" class="k-button" value="Pre-configure Google Analytics"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-sm-4 text-right">
                    <admin-label asp-for="GoogleId" class="control-label"/>
                </div>
                <div class="col-md-8 col-sm-8">
                    <admin-input asp-for="GoogleId"/>
                    <span asp-validation-for="GoogleId"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-sm-4 text-right">
                    <admin-label asp-for="TrackingScript" class="control-label"/>
                </div>
                <div class="col-md-8 col-sm-8">
                    <admin-textarea asp-for="TrackingScript"></admin-textarea>
                    <span asp-validation-for="TrackingScript"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-sm-4 text-right">
                    <admin-label asp-for="EcommerceScript" class="control-label"/>
                </div>
                <div class="col-md-8 col-sm-8">
                    <admin-textarea asp-for="EcommerceScript"></admin-textarea>
                    <span asp-validation-for="EcommerceScript"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-sm-4 text-right">
                    <admin-label asp-for="EcommerceDetailScript" class="control-label"/>
                </div>
                <div class="col-md-8 col-sm-8">
                    <admin-textarea asp-for="EcommerceDetailScript"></admin-textarea>
                    <span asp-validation-for="EcommerceDetailScript"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-sm-4 text-right">
                    <admin-label asp-for="IncludingTax" class="control-label"/>
                </div>
                <div class="col-md-8 col-sm-8">
                    <label class="mt-checkbox mt-checkbox-outline control control-checkbox">
                        <admin-input asp-for="IncludingTax"/>
                        <div class="control__indicator"></div>
                    </label>
                    <span asp-validation-for="IncludingTax"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-sm-4 text-right">
                    <admin-label asp-for="AllowToDisableConsentCookie" class="control-label"/>
                </div>
                <div class="col-md-8 col-sm-8">
                    <label class="mt-checkbox mt-checkbox-outline control control-checkbox">
                        <admin-input asp-for="AllowToDisableConsentCookie"/>
                        <div class="control__indicator"></div>
                    </label>
                    <span asp-validation-for="AllowToDisableConsentCookie"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-sm-4 text-right">
                    <admin-label asp-for="ConsentDefaultState" class="control-label"/>
                </div>
                <div class="col-md-8 col-sm-8">
                    <label class="mt-checkbox mt-checkbox-outline control control-checkbox">
                        <admin-input asp-for="ConsentDefaultState"/>
                        <div class="control__indicator"></div>
                    </label>
                    <span asp-validation-for="ConsentDefaultState"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-sm-4 text-right">
                    <admin-label asp-for="ConsentName" class="control-label"/>
                </div>
                <div class="col-md-8 col-sm-8">
                    <admin-textarea asp-for="ConsentName"></admin-textarea>
                    <span asp-validation-for="ConsentName"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-sm-4 text-right">
                    <admin-label asp-for="ConsentDescription" class="control-label"/>
                </div>
                <div class="col-md-8 col-sm-8">
                    <admin-textarea asp-for="ConsentDescription"></admin-textarea>
                    <span asp-validation-for="ConsentDescription"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-12 col-sm-12">
                    <div class="note note-info">
                        <em>Please note that {ECOMMERCE} line works only when you have "Disable order completed page" order setting unticked.</em>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-actions">
            <div class="offset-md-3 offset-sm-3 col-md-9 col-sm-9">
                <input type="submit" name="save" class="btn green" value="@Loc["Admin.Common.Save"]"/>
            </div>
        </div>
    </div>
</form>